@import "./base.less";

.@{css-prefix}.modal {
  font-size: 1em;
  position: fixed;
  z-index: 1001;
  text-align: left;
  top: 0;
  left: 50%;
  background: #ffffff;
  border: none;
  border-radius: @modal-border-radius;
  width: @modal-width;
  margin: 0 0 0 -@modal-width/2;
  color: rgba(0, 0, 0, .65);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px;

  .image {
    font-size: 0;
    line-height: 1;
  }

  > i {
    opacity: .8;
    position: absolute;
    top: @padding-horizontal;
    right: @padding-horizontal;
    cursor: pointer;
  }

  > .header {
    padding: @padding-horizontal;
    font-size: 1.1em;
    border-bottom: @border-style;
    border-radius: @modal-border-radius @modal-border-radius 0 0;
    background: #F8F8F9;
    font-weight: bold;
    //opacity: .8;
  }

  > .content {
    border-radius: 0 0 @modal-border-radius @modal-border-radius;
    padding: @padding-horizontal;
  }
}

@media only screen and (max-width: @largestMobileScreen) {
  .@{css-prefix}.modal {
    width: 96%;
    margin: 0 0 0 -48%;
  }
}